<script type="text/javascript">
    function hotel_sorting(sel){
        $.ajax({
            type: "GET",
            url: "hotel_ticket",
            data: { sort: sel.value },
            dataType: "script",
            beforeSend: function(){
                $(".sort-loading").show();
            },
            complete: function(){
                $(".sort-loading").hide();
            },
        })
    };
    $(document).ready(function(){
        $("input#search_q").autocomplete({
            source: 'hotel_autocomplete',
            dataType: "json",
            minLength: 3,
            search: function(){
                $(".autocomplete-loading").show();
            },
            response: function(){
                $(".autocomplete-loading").hide();
            },
            focus: function(event, ui){
               $('input#search_q').val(ui.item.value);
               $(".autocomplete-loading").hide();
               return false;
            },  
            select: function(event, ui){     
                $('input#search_q').val(ui.item.value);
                $(".autocomplete-loading").hide();
                return false;
            },
        });     
        
        var obj = $('#location').data("autocomplete");
        obj && (obj._renderItem = function(ul, item) {
        return $("<li style='background-color:red;'>").data("item.autocomplete", item).append("<a style='font-size:0.8em'><b>" + item.label + "</b><br /></a>").appendTo(ul);
        });

    }); 
</script>

<nav id="breadcrumbs">
    <ul>
        <li><a href="./">Home</a></li>
        <li><a href="./">Hotel</a></li>
        <li><a href="./">Teades City</a></li>
        <li>Search Result</li>
    </ul>
</nav>     
<%= @token %> token
<article id="content" class="cols-c">
    <div>
        <div class="slider-a">
            <figure class="image-b"><img src="<%=asset_path 'temp/693x276.gif'%>"  alt="Placeholder" width="693" height="276"> <figcaption>Paris Eurostar Breaks</figcaption></figure>
            <figure class="image-a"><img src="<%=asset_path 'temp/693x276(1).gif' %>" alt="Placeholder" width="693" height="276"> <figcaption>Paris Eurostar Breaks <span>Curabitur fringilla mauris interdum nec magna</span> <span>From $350</span></figcaption></figure>
            <figure><img src="<%=asset_path 'temp/693x276(2).gif' %>" alt="Placeholder" width="693" height="276"></figure>
        </div>
        <form action="./" method="post" class="module-b" style="margin-bottom:-5px;">
            <fieldset>
                <nav class="pagination-a">
                    <p>Page</p>
                    <ol style="background-color: white;border: 1px solid #FFFFFF;max-height:30px;">
                        <div id="pagination" class="collection_paginator" style="margin-top:-20px">
                            <%= will_paginate @results , :previous_label => '<', :next_label => '>', remote: true  %>
                        </div>
                    </ol>
                </nav>
                <p class="select-b">
                    <label for="mba">Short by:</label>
                    <select id="hotel_sort" name="mba" onchange="hotel_sorting(this);">
                        <option value="none">Available</option>
                        <option value="popular">Popular</option>
                        <option value="starasc">Star 1..5</option>
                        <option value="stardesc">Star 5..1</option>
                        <option value="priceasc">Price 1..5</option>
                        <option value="pricedesc">Price 5..1</option>
                    </select><div class="star-loading" style="display:none;float:right;margin-right:5px;"><%= image_tag "ajax-loader-blue.gif" %></div>
                </p>
                <p class="check-b">
                    <label for="fcba"><input type="radio" id="fcba" name="fcb"> List</label>
                    <label for="fcbb"><input type="radio" id="fcbb" name="fcb"> Map</label>
                </p>
            </fieldset>
        </form>
        <div class="news-a">
        <div id="hotel_list"> <!-- hotel list -->
            <% @results.each do |hotel| %>
                <% unless hotel["name"].blank? %> 
                    <article>
                        <header>
                            <h2><a href="<%= hotel["business_uri"] %>"><%= hotel["name"] %></a></h2>
                            <figure> <%= image_tag hotel["photo_primary"] %> <!-- <figcaption><%#= index %></figcaption> --></figure>
                            <p><span class="rating-a <%= hotel_star(hotel["star_rating"]) %>">0/5</span><%= hotel["name"] %> - <%= hotel["province_name"] %>, <%= hotel["regional"] %> </p>
                        </header>
                        <%#= raw(truncate( hotel.description_eng , :length => 150 ))  %>
                        <p class="scheme-d" style="font-size:2em"><span>Rp.</span><%= hotel["price"].to_s %> 
                            <%#= link_to "book", {controller: "hotel_ticket", action: "hotel_ticket_detail", url: hotel["business_uri"].gsub("https://api.master18.tiket.com/", '')}, style: "font-size:0.6em;" %>
                            <% l = hotel["business_uri"].split('?').first %>
                            <% u = URI.parse(hotel["business_uri"].to_s) %>
                            <% p = CGI.parse(u.query) %>
                            <%= link_to "book",{controller: "hotel_ticket", action: "hotel_ticket_detail", name: l.split('/hotel/').last ,startdate: p["startdate"].first, enddate: p["enddate"].first, night: p["night"].first, room: p["room"].first, adult: p["adult"].first, child: p["child"].first, uid: p["uid"].first} , style: "font-size:0.6em;" %>
                         </p>
                        <footer>
                            <p>User Rating <span class="rating-b <%= user_rating(hotel["rating"].to_s) %>">0/5</span></p>
                         <!--    <p class="link-b"><a href="./">View Details</a></p> -->
                        </footer>
                    </article>
                <% end %>
            <% end %>
        </div>   
            <footer>
                <nav class="pagination-a">
                 
                    <!-- <p>Page 01 of 06</p>
                    <ol>
                        <li class="prev"><a href="./">Previous</a></li>
                        <li class="active"><a href="./">01</a></li>
                        <li><a href="./">02</a></li>
                        <li><a href="./">03</a></li>
                        <li><a href="./">04</a></li>
                        <li class="next"><a href="./">Next</a></li>
                    </ol> -->
                </nav>
            </footer>
        </div>
    </div>
    <aside>
        <%= render "form_search" %>
        <div id="refine_hotel_ticket_search">
            <%= render "refine_hotel_ticket_search" %>
        </div>
    </aside>
</article>

